<template>
	<div class="g-select02">
		<el-select 
			v-model="select01"
			@change="selectChange"
			@visible-change="focus"
		>
			<span slot="prefix">{{ title }}</span>
		  <el-option
		    v-for="(item,index) of selectList"
		    :key="item.value"
		    :label="item.label"
		    :value="item.value"
		     @mouseenter.native="mouseenter(index)"
		  >
		  </el-option>
		</el-select>
		<div :class="['s-desc',{'show': isShow}]" v-if="selectList[current].desc">
			{{ selectList[current].desc }}
		</div>
	</div>
</template>

<script>
	export default {
		name: "gSelect02",
		data() {
			return {
				select01: this.selectList.length ? this.selectList[0] : "",
				current: 0,
				isShow: false
			}
		},
		props: {
			title: {
				type: String,
				default: function() {
					return '';
				},
				required: true
			},
			selectList: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			}
		},
		methods: {
			mouseenter(index){
				this.current = index;
			},
			focus(val){
				this.isShow = val;
			},
			selectChange(val){
				this.$emit('change',val);
				// this.select01 = var;
			}
		}
	}
</script>
